<template>
  <view
    class="bar-button"
    :class="{ 'border-top': borderTop, 'border-bottom': borderBottom }"
    @click="onClick"
  >
    <slot name="left">
      <view class="label" v-if="label">{{ label }}</view>
    </slot>
    <view class="right">
      <slot name="right"></slot>
      <image src="@/static/svg-icon/right.svg" />
    </view>
  </view>
</template>

<script setup>
const emit = defineEmits('click')

const props = defineProps({
  label: {
    type: String,
    default: '标题',
  },
  borderTop: {
    type: Boolean,
  },
  borderBottom: {
    type: Boolean,
  },
})

function onClick() {
  uni.$u.toast(props.label)
  emit('click')
}
</script>

<style lang="scss">
.bar-button {
  background-color: #fff;
  height: 44px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &.border-top {
    border-top: 1px solid $uni-border-color;
  }
  &.border-bottom {
    border-bottom: 1px solid $uni-border-color;
  }
  .right {
    height: 44px;
    display: flex;
    align-items: center;
    image {
      width: 20px;
      margin-left: 10px;
    }
  }
}
</style>
